<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例_大风车</title>
	<script src="../js/jquery-1.11.1.js"></script>
    <style>
        .imga{
			animation: dfc .8s linear infinite;
		}
		@keyframes dfc{
			0%{
				transform: rotate(180deg);
			}
			30%{
				transform: rotate(360deg);
			}
			100%{
				transform: rotate(720deg);
			}
		}
		
		.imgb{
			animation: dfc1 .8s linear infinite;
		}
		@keyframes dfc1{
			0%{
				transform: translate(20px) rotateX(180deg) scale(1);
			}
			30%{
				transform: translate(120px) rotateX(360deg) scale(1.2);
			}
			100%{
				transform: translate(1200px) rotateX(720deg)  scale(1.4);
			}
		}
    </style>
</head>
<body>
    <img src="../img/dfc.jpg" alt="大风车" />
	<audio src="../img/dafengche.mp3" autoplay></audio>
    <button id="btn1">开转</button>
    <button id="btn2">暂停</button>
    <button id="btn3">翻转</button>
    <script>
		/* jq  页面图片改变 而且 旋转 */
		 $("#btn1").click(function(){
			$("img").attr("src","../img/dfc.jpg").addClass("imga");
		});
		// 暂停
		$("#btn2").click(function(){
			$("img").attr("src","../img/dfc.jpg").removeClass("imga");
			$("audio").removeAttr("src");
			});
			// 翻转
			$("#btn3").click(function(){
				$("img").attr("src","../img/dfc.jpg").toggleClass("imgb");
				$("audio").attr("src","../img/dafengche.mp3");
			});
	</script>
</body>
</html>